Alerta

Visión general

Las alertas y notificaciones (toasts) son componentes esenciales para comunicar información importante a los usuarios.

Las alertas proporcionan mensajes persistentes que requieren atención del usuario, mientras que los toasts son notificaciones temporales que desaparecen automáticamente.

Alertas

Las alertas se utilizan para mensajes importantes que requieren atención del usuario, como:

- Errores en formularios
- Advertencias del sistema
- Confirmaciones de éxito
- Información crítica

Disponemos de cuatro niveles de severidad: éxito (verde), información (azul), advertencia (amarillo) y error (rojo).

Notificaciones (Toasts)

Los toasts son mensajes no intrusivos que aparecen temporalmente, típicamente en una esquina de la pantalla.

Características clave:
- Duración: 4-6 segundos
- Posición: Superior derecha por defecto
- Contenido: Breve y conciso
- Interacción: Pueden incluir acciones rápidas como "Deshacer"

Accesibilidad y Responsividad

Tanto alertas como toasts cumplen con los estándares WCAG, ofreciendo contraste adecuado, roles semánticos (role="alert", role="status") y compatibilidad con lectores de pantalla.

Son completamente responsivos y optimizados para aplicaciones móviles y web, adaptándose a diferentes tamaños de pantalla sin perder legibilidad o funcionalidad.

Integración

En Figma, las alertas y toasts existen como variantes estructuradas vinculadas a estilos globales de texto y color.

En Tailwind CSS, se implementan utilizando utilidades como bg-success-100, text-error-700, rounded-md, shadow-lg, con soporte para animaciones personalizadas de entrada/salida.

Mejores Prácticas

- Usar alertas para mensajes persistentes que requieren atención del usuario
- Usar toasts para notificaciones transitorias que no requieren acción
- Mantener estilos consistentes en todos los niveles de severidad
- Asegurar ratios de contraste adecuados para accesibilidad
- Limitar la duración de toasts a 4-6 segundos para mejor experiencia de usuario
- Proporcionar opciones claras para descartar alertas